<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <form class="" @submit.prevent="demo">
            <label for="text">账号：</label>
            <input type="text" id="text" v-model.trim="account"></br></br>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" v-model="password"></br></br>
            <label for="age">年龄：</label>
            <input type="number" id="age" v-model.number="age"></br></br>
            性别：
            男<input type="radio" name="sex" v-model="sex" value="male">
            女<input type="radio" name="sex" v-model="sex" value="female"></br></br>
            爱好：
            学习：<input type="checkbox"  v-model="hobby" value="study">
            打游戏：<input type="checkbox"  v-model="hobby" value="game">
            吃饭：<input type="checkbox"  v-model="hobby" value="eat"></br></br>
            所属地区
           <select v-model="city">
                <option value="">请选择地区</option>
                <option value="shanghai">上海</option>
                <option value="hangzhou">杭州</option>
                <option value="wuhan">武汉</option>
            </select></br></br>
            其他信息：
            <textarea v-model.lazy="other" cols="30" rows="5"></textarea></br></br>
            <input type="checkbox" v-model="agree"> 阅读并接受<a href="">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                account:"",
                password:"",
                age:"",
                sex:"",
                hobby:[],
                city:"shanghai",
                other:"",
                agree:""
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this._data));
                },
    
            },
        })
    </script>
</body>
</html>